﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>弹出框</title>
    <link href="jqtip.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //初始化：是否开启DIV弹出窗口功能
            //0 表示开启; 1 表示不开启;
            var popupStatus = 0;
            //使用Jquery加载弹窗 
            function loadPopup() {
                //仅在开启标志popupStatus为0的情况下加载  
                if (popupStatus == 0) {
                    $("#backgroundPopup").css({
                        "opacity": "0.7"
                    });
                    $("#backgroundPopup").fadeIn("slow");
                    $("#popupText").fadeIn("slow");
                    popupStatus = 1;
                }
            }
            //使用Jquery去除弹窗效果 
            function disablePopup() {
                //仅在开启标志popupStatus为1的情况下去除
                if (popupStatus == 1) {
                    $("#backgroundPopup").fadeOut("slow");
                    $("#popupText").fadeOut("slow");
                    popupStatus = 0;
                }
            }
            //将弹出窗口定位在屏幕的中央
            function centerPopup() {
                //获取系统变量
                var windowWidth = document.documentElement.clientWidth;
                var windowHeight = document.documentElement.clientHeight;
                var popupHeight = $("#popupText").height();
                var popupWidth = $("#popupText").width();
                //居中设置   
                $("#popupText").css({
                    "position": "absolute",
                    "top": windowHeight / 2 - popupHeight / 2,
                    "left": windowWidth / 2 - popupWidth / 2
                });
                //以下代码仅在IE6下有效

                $("#backgroundPopup").css({
                    "height": windowHeight
                });
            }

            //打开弹出窗口   
            //按钮点击事件!
            $("#button").click(function () {
                //设置弹出层的大小
                $("#popupText").css({ height: "500", width: "500" });
                //调用函数居中窗口
                centerPopup();
                //调用函数加载窗口
                loadPopup();
            });
            //关闭弹出窗口   
            //点击"X"所触发的事件
            //            $("#popupContactClose").click(function () {
            //                disablePopup();
            //            });
            //            //点击窗口以外背景所触发的关闭窗口事件!
            //            $("#backgroundPopup").click(function () {
            //                disablePopup();
            //            });
            //键盘按下ESC时关闭窗口!
            $(document).keypress(function (e) {
                if (e.keyCode == 27 && popupStatus == 1) {
                    disablePopup();
                }
            });
            //cancel
            $("#cancel").click(function () {
                disablePopup();
            });
        });
    </script>
</head>
<body>
    <center>
        <div id="button">
            <input type="submit" value="点击这里查看效果" /></div>
    </center>
    <div>
        <div id="popupText">
            <h1>
                弹出窗口的标题
            </h1>
            <div id="textArea">
                <form id="popupForm" action="" method="post">
                <div id="popupMain">
                    这是主要弹出内容啊~~~
                </div>
                <br />
                <div style="text-align: center;">
                    <input type="button" value="确定" id="submit" />
                    <input type="button" value="取消" id="cancel" />
                </div>
                </form>
            </div>
        </div>
        <div id="backgroundPopup">
        </div>
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</body>
</html>
